<template>
  <div class="detail">
    <template v-if="isSend">
      <div class="tabs">
        <ul>
          <li :class="{'active':selected==index}" v-for="(t,index) in tabs" :key="index"
              @click="change(index)">
            <p> <i :class="t.icon"></i>{{t.label}}</p>
          </li>
        </ul>
      </div>
      <iframe :src="url" frameborder="0" style="width: 100%; height: 800px"
              :style="{ height: dialogHeight }"></iframe>
    </template>
    <template v-else>
      <iframe :src="proUrl.url" frameborder="0" style="width: 100%; height: 800px"
              :style="{ height: dialogHeight }"></iframe>
    </template>
  </div>
</template>
<script>
import {JSONParse} from "@/assets/common";

export default {
  name: "RxProceDetail",

  created() {
    // var afterUrl = decodeURI(window.location.search.substring(1))
    // console.log(afterUrl)
    this.proUrl = window.opener.objd
  },
  data() {
    return {
      tabs: [{label: '正文', value: '0', icon: 'el-icon-s-help'},
        {label: '流程', value: '2', icon: 'el-icon-camera'},
        {label: '流程使用说明书', value: '1', icon: 'el-icon-help'},
      ],
      selected: 0,
      proUrl:{},
      dialogHeight: document.documentElement.clientHeight - 54 + 'px',
      objdata: {},
      url: "",
      isSend:false
    }
  },
  mounted() {
    this.url = this.proUrl.form
    this.isSend =this.proUrl.isSend
  },
  watch: {},
  methods: {
    change(index) {
      this.selected = index;
      switch (index) {
        case 0 :
          this.url = this.proUrl.form
          break
        case 1 :
          this.url = this.proUrl.workflow
          break
        case 2 :
          this.url = this.proUrl.instruction
          break
      }
    },
    handleCloseDialog() {
      this.$emit('handle-close-dialog')
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;


  .tabs {
    background: #FEEFCF;
    width: 100%;
    height: 50px;

    ul {
      width: 300px;
      height: 100%;
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      margin-left: 2em;

      li {

        height: 30px;
        text-align: center;
        cursor: pointer;
        color: black;
        font-size: 16px;
      }

      .active {
        color: #108EE9;
      }
    }
  }
}
</style>
